<template>
	<template v-if="data.show && $slots.default">
		<view class="kui-overlay" @tap="onClose">
			<slot></slot>
			<view :class="[blur ? 'blur' : '']" :style="{
          position: 'absolute',
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          backgroundColor: `hsla(220, 17.1%, 13.7%, ${overlayNess})`,
          borderRadius: `${data.radiusSize}rpx`,
          zIndex: zIndex,
        }">
				<view class="kui-flex" :class="vnodeCenter ? 'kui-justify-center kui-items-center' : ''" :style="{
            height: `100%`,
          }">
					<rich-text :nodes="vnode"></rich-text>
				</view>
			</view>
		</view>
	</template>
	<template v-else-if="data.show && !$slots.default">
		<view class="kui-overlay" :class="[blur ? 'blur' : '', data.classes]" :style="{
        backgroundColor: `hsla(220, 17.1%, 13.7%, ${overlayNess})`,
        width: '100%',
        height: '100%',
        zIndex: zIndex,
        position: 'fixed',
        top: 0,
        left: 0,
        borderRadius: `${data.radiusSize}rpx`,
      }" @touchmove.prevent @mousewheel.prevent @tap="onClose">
			<view class="kui-flex" :class="vnodeCenter ? 'kui-justify-center kui-items-center' : ''" :style="{
          width: '100%',
          height: '100%',
        }">
				<slot name="content">
					<rich-text :nodes="vnode"></rich-text>
				</slot>
			</view>
		</view>
	</template>
</template>

<script lang="ts">
	/**
	 * Shade 遮罩组件
	 * @description 可自动全屏或者给某个区块包裹的遮罩蒙层
	 * @property {Number} zIndex = 999 层级
	 * @property {String} vnode 填充内容[支持HTML字符串]
	 * @property {Boolean} vnodeCenter = [true/false] 填充内容是否居中显示
	 *  @value true 是
	 *  @value false 否
	 * @property {Number} radius 圆角
	 * @property {Boolean} isMaskClick = [true/false] 遮罩点击是否关闭
	 *  @value true 是
	 *  @value false 否
	 * @example
	 *  <kui-shade>
	 *    <view>测试</view>
	 *  </kui-shade>
	 */
	import {
		getCurrentInstance,
		reactive,
		defineComponent,
		SetupContext
	} from "vue";

	const name = 'kui-overlay';

	import ShadeProps from './props';

	export default defineComponent({
		name,
		props: ShadeProps,
		emits: ['close'],
		options: {
			// 小程序虚拟节点设置
			virtualHost: true
		},
		setup(props, context: SetupContext) {
			const {
				proxy
			}: any = getCurrentInstance();
			const theme = proxy.$theme;

			const slots = proxy.$slots;

			const data = reactive({
				width: "100%",
				height: "",
				show: props.show,
				classes: '',
				isMaskClick: props.closeOnClickMask,
				radiusSize: theme.size.radiusSize[props.radiusSize]
			});

			const sysinfo = uni.getSystemInfoSync();

			const open = () => {
				data.height = `${sysinfo.windowHeight}px`;
				data.show = true;
				data.classes = 'fade-in';
			}

			const close = () => {
				data.classes = 'fade-out';
				setTimeout(() => {
					data.show = false;
				}, 120);
			}
			
			const onClose = () => {
				if (data.isMaskClick) {
					close();
				} else {
					context.emit('close');
				}
			}

			const changeMaskClick = (v) => {
				data.isMaskClick = v;
			}

			context.expose({
				open,
				close,
				changeMaskClick
			});

			return {
				theme,
				slots,
				data,
				open,
				close,
				onClose,
				changeMaskClick
			}
		}
	});
</script>

<style scoped>
	.kui-overlay {
		position: relative;
	}

	.blur {
		backdrop-filter: blur(10rpx);
	}

	.fade-in {
		animation: fade-in .3s cubic-bezier(.39, .575, .565, 1.000) both;
	}

	.fade-out {
		animation: fade-out .3s ease-out both;
	}

	@keyframes fade-in {
		0% {
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	@keyframes fade-out {
		0% {
			opacity: 1
		}

		100% {
			opacity: 0
		}
	}
</style>
